<template>
	<!-- 展示组件 -->
	<view class="charts-content w-h-100">
		<!-- 进度条 -->
		<view v-if="showCom == 'progress'">
			<ranking-prog :unitType="2" :rankList="rankingData" unitTxt="个" />
			<ranking-prog :unitType="1" :rankList="rankingData" unitTxt="亿" />
		</view>
		<!-- 回到顶部 -->
		<view v-if="showCom == 'toTop'">
			<scroll-view class="scroller-box" scroll-y="true" scroll-with-animation="true" :scroll-top="scrollTopNum" @scroll="scrollFun">
				<view class="scroller-content"></view>
				<!-- 回到顶部 -->
				<scroll-top :showToTop="showToTops" @goTopFun="goTopFun" />
			</scroll-view>
		</view>
		<!-- 瞄点定位 -->
		<view v-if="showCom == 'aimingPosition'" class="aiming-position-box">
			<uni-data-select v-model="toView" :localdata="anchorPoints" @change="changeFun" />
			<scroll-view class="scroller-box" scroll-y="true" scroll-with-animation="true" :scroll-into-view="toView">
				<view id="anchor1" class="has-back">内容模块1</view>
				<view id="anchor2" class="has-back">内容模块2</view>
				<view id="anchor3" class="has-back">内容模块3</view>
			</scroll-view>
		</view>
		<!-- 日期 -->
		<view v-if="showCom == 'Time'" class="show-time-com">
			<!-- 不支持设置默认时间 -->
			<view class="flex-row">
				<view class="row-item">
					<view class="flex-row">
						<view class="row-item"><text class="time-type-txt">日期类型：</text></view>
						<view class="row-item"><uni-data-select v-model="timePram.timeType" :localdata="timeTypeList" @change="changeType" /></view>
					</view>
				</view>
				<view class="row-item"><select-dt :timeType="timePram.timeType" :endTime="true" @getStartT="getStartTime" @getEndT="getEndTime" /></view>
			</view>
			<text v-if="timePram.timeType">所选日期：{{ timePram.startTime }}-{{ timePram.endTime }}</text>
		</view>
		<!-- 饼状图 -->
		<pie-echart v-if="showCom == 'pieEchart'" :pieCanvasId="'chartsPie'" :pieChartData="ChartData" ref="chartsPie" />
		<!-- 柱状图 -->
		<bar-echart v-if="showCom == 'barEchart'" :barCanvasId="'columnCanvas'" :barChartData="ChartData" :ontouch="true" />
		<!-- 折现+柱状混合图 -->
		<barLineEChart v-if="showCom == 'barLineEChart'" :chartData="ChartData" />
	</view>
</template>

<script>
import rankingProg from '@/components/ranking-progress/ranking-progress.vue';
import scrollTop from '@/components/scrollTop/scrollTop.vue';
import selectDt from '@/components/select-date/select-date.vue';
import pieEchart from '@/components/echartsCom/pie-y.vue';
import barEchart from '@/components/echartsCom/bar-charts.vue';
import barLineEChart from '@/components/echartsCom/bar-line-charts.vue';
import { pieChart } from '@/utils/echarts.config.js';
import moment from '@/static/js/moment.min.js';
export default {
	name: 'show-com',
	components: {
		rankingProg,
		scrollTop,
		selectDt,
		pieEchart,
		barEchart,
		barLineEChart
	},
	data() {
		return {
			showCom: 'pieEchart',
			ChartData: {},
			rankingData: [],
			oldScrollNum: 0,
			scrollTopNum: 0,
			showToTops: false,
			toView: '',
			anchorPoints: [{ value: 'anchor1', text: '内容模块1' }, { value: 'anchor2', text: '内容模块2' }, { value: 'anchor3', text: '内容模块3' }],
			timePram: {
				timeType: 'day',
				startTime: '',
				endTime: '',
				startTimeTxt: '',
				endTimeTxt: ''
			},
			timeTypeList: [{ value: 'day', text: '日' }, { value: 'month', text: '月' }, { value: 'quarter', text: '季度' }, { value: 'year', text: '年' }]
		};
	},
	onLoad(option) {
		let type = option.type,
			_title = '';
		this.showCom = type;
		switch (type) {
			case 'progress':
				_title = '组件-排名进度条';
				this.initProgress();
				break;
			case 'toTop':
				_title = '组件-回到顶部';
				this.initBarChar();
				break;
			case 'Time':
				_title = '组件-日期';
				this.initTimeCom();
				break;
			case 'aimingPosition':
				_title = '组件-锚点定位';
				break;
			case 'pieEchart':
				_title = '组件-饼图';
				this.initPieChar();
				break;
			case 'barEchart':
				_title = '组件-柱状图';
				this.initBarChar();
				break;
			case 'barLineEChart':
				_title = '组件-折线+柱状图';
				this.initBarLineEChart();
				break;
		}
		uni.setNavigationBarTitle({
			title: _title
		});
	},
	methods: {
		initProgress() {
			this.rankingData = [
				{
					name: 'XXXXXXXXXXXXXXXX银行分理处1',
					percentage: 82,
					num: 385
				},
				{
					name: 'XXXXXXX中国银行分理处2',
					percentage: 80,
					num: 345
				},
				{
					name: '中国工商银行雄县支行3',
					percentage: 70,
					num: 233
				},
				{
					name: '容城县津海大街光大银行分理处4',
					percentage: 55,
					num: 214
				},
				{
					name: '农业银行雄县支行5',
					percentage: 40,
					num: 128
				},
				{
					name: '农业银行雄县支行6',
					percentage: 40,
					num: 128
				},
				{
					name: '容城闲罗萨大街中国银行分理处7',
					percentage: 80,
					num: 345
				},
				{
					name: '中国工商银行雄县支行8',
					percentage: 70,
					num: 233
				},
				{
					name: '容城县津海大街光大银行分理处9',
					percentage: 55,
					num: 214
				},
				{
					name: '农业银行雄县支行10',
					percentage: 40,
					num: 128
				},
				{
					name: '2农业银行雄县支行11',
					percentage: 40,
					num: 128
				}
			];
		},
		scrollFun(e) {
			this.oldScrollNum = e.detail.scrollTop;
			if (this.oldScrollNum > 500 || this.oldScrollNum == 500) {
				this.showToTops = true;
			} else {
				this.showToTops = false;
			}
		},
		// 回滚到顶部
		goTopFun(v) {
			// 解决view层不同步的问题
			this.scrollTopNum = this.oldScrollNum;
			this.$nextTick(() => {
				this.scrollTopNum = 0;
			});
		},
		initTimeCom() {
			this.timePram.startTime = moment(new Date().getTime()).format('YYYY-MM-DD');
			this.timePram.endTime = this.timePram.startTime;
		},
		getStartTime(time) {
			this.timePram.startTime = time._time;
			this.timePram.startTimeTxt = time.timeY;
			console.log('开始时间', time);
		},
		getEndTime(time) {
			this.timePram.endTime = time._time;
			this.timePram.endTimeTxt = time.timeY;
			console.log('结束时间', time);
		},
		changeType(value) {
			this.timePram.timeType = value;
		},
		changeFun(id) {
			if (!id) {
				return;
			}
			let anchorId = id;
			setTimeout(() => {
				this.$nextTick(() => {
					this.toView = anchorId;
				});
			}, 1000);
		},
		initPieChar() {
			setTimeout(() => {
				this.ChartData = JSON.parse(JSON.stringify(pieChart.series));
				this.ChartData.series[0].data = [{ name: '缴存', value: 200 }, { name: '提取', value: 200 }, { name: '贷款', value: 201 }];
				this.$refs.chartsPie.pieEopts.title.text = '本月检核问题类型占比';
			}, 500);
		},
		initBarChar() {
			//模拟从服务器获取数据时的延时
			setTimeout(() => {
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					categories: ['202108', '202109', '202110', '202111', '202112', '202201', '202202', '202203', '202204', '202205', '202206', '202207'],
					series: [
						{
							name: '问题数量',
							data: [990, 850, 790, 700, 700, 450, 700, 650, 590, 580, 550, 570]
						}
					]
				};
				this.ChartData = JSON.parse(JSON.stringify(res));
			}, 500);
		},
		initBarLineEChart() {
			setTimeout(() => {
				let res = {
					categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
					series: [
						{ name: '发放金额', type: 'column', data: [70, 90, 88, 88, 65, 78] },
						{ name: '同期发放金额', type: 'column', data: [50, 58, 56, 58, 43, 55] },
						{ name: '同比增长率', index: 1, type: 'line', data: [-2, -6, 4, 3, 4, 0], addPoint: true },
						{ name: '环比增长率', index: 1, type: 'line', data: [-5, -9, 5, -5, -14, 0], addPoint: true }
					]
				};
				this.ChartData = JSON.parse(JSON.stringify(res));
			}, 500);
		}
	}
};
</script>

<style lang="scss" scoped>
.charts-content {
	/deep/.ranking-progress-box {
		padding: 20rpx 32rpx;
	}
	.row-item {
		flex: 1;
		.time-type-txt {
			height: 70rpx;
			line-height: 70rpx;
		}
	}
	.show-time-com {
		padding-top: 50rpx;
		padding: 50rpx 32rpx 0 32rpx;
	}
	.scroller-box {
		height: 1600rpx;
		.scroller-content {
			height: 1500px;
			background-color: aliceblue;
		}
	}
	.aiming-position-box {
		.scroller-box {
			height: 1500rpx;
		}
	}
	.has-back {
		height: 800rpx;
		width: 100%;
		background-color: antiquewhite;
	}
	#anchor2 {
		background-color: paleturquoise;
	}
	#anchor3 {
		background-color: greenyellow;
	}
}
</style>
